{extend name="base" /}
{block name="body"} 
<div class="layui-card">
    <div class="p-3">
     <form action="{:request()->url()}" class="layui-form" method="get">
        <div class="layui-input-inline" style="width: 60%;">
           
            <input type="text" name="subscribe" placeholder="登录账户/邮箱/QQ/手机号码" class="layui-input" autocomplete="off"/>
        </div>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="fa fa-search"></i>提交搜索</button>
    </form>
</div>
     <div class="layui-tab layui-tab-brief" lay-filter="tab-all">
        <ul class="layui-tab-title">
            <li data-status="" class="layui-this">全部会员</li>
            <li data-status="1">{:__('locking')}</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table lay-filter="UserList" class="layui-hide" id="UserList"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="order_pay"></table>
            </div>
        </div>
    </div>
<script type="text/html" id="toolbarDemo"> 
{if(empty(ishone()))}  
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="fa fa-trash-o"></i>{:__('Multiple choice deletion')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i>{:__('Refresh')}</button> 
        {/if}
        <div class="layui-btn-group">
            <a href="{:url('user/add')}" style="border-radius: 5px;" class="layui-btn layui-btn-sm ajax-iframe" data-width="600px" data-height="475px"><i class="layui-icon layui-icon-add-circle"></i>&nbsp;新增</a>
         </div>
      </div>
</script>
    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('user/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>{:__('modify')}</a>
        <a href="{:url('user/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除会员{{d.username}}"><i class="layui-icon layui-icon-delete"></i>{:__('delete')}</a>
    </script>

<script type="text/html" id="group_id">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="group_id" id="{{d.id}}" value="{{d.username}}" lay-skin="tag" title="VIP会员" lay-filter="lockgroup" {{ d.group_id == 1 ? 'checked' : '' }}>
    </script>
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="status" id="{{d.id}}" value="{{d.username}}" lay-skin="tag" title="锁定" lay-filter="lockDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>
</div>
{/block}

            
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var dropdown = layui.dropdown;
            // 初始化加载
            getList('#UserList', '')
            // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
            element.on('tab(tab-all)', function (data) {
                   layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                       tips: 1
                   });
                // console.log(this);        // 当前Tab标题所在的原始DOM元素
                // console.log(data.index);  // 得到当前Tab的所在下标
                // console.log(data.elem);   // 得到当前的Tab大容器
                var status = $(this).attr('data-status')
                var position = '#UserList'
                switch (status) {
                    case '1': position = '#order_pay'; break;
                    default: position = '#UserList';
                }
                getList(position, status)
            })
            // 公共方法
            function getList(position, status = '') {
                table.render({
                    elem: position
                    ,toolbar: '#toolbarDemo'  //开启头部工具栏，并为其绑定左侧模板
                    , method: 'get'
                    , url: "{:url('user/index_json',['subscribe'=>input('subscribe')])}"
                    , where: {
                      status: status
                    }
                    , cellMinWidth: 100
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                       layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                          //,curr: 5 //设定初始在第 5 页
                    , groups: 5 //只显示 1 个连续页码
                    , first: '首页' //不显示首页
                    , last: '尾页' //不显示尾页
                    , prev: '<em>上一页</em>'
                    , next: '<em>下一页</em>'
                        }
                    , limit:'15'
                    , limits:['15','30','50','100','200','500']
                    ,  size:'lg'
                    , even:true
                    , request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        , limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    , lineStyle: 'height: 100px;'//头像高度
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                  {
                    type: 'checkbox'
                }, {
                    type:'numbers',
                    title:'#', 
                    width: 60
                }, {
                    field: 'headimgurl', 
                    align: 'center', 
                    templet: function (d) {
                        var url = d.headimgurl;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                     }, 
                     title: '图片', 
                     width: 150,
                     unresize: true
            }, {
                    field: 'username', 
                    title: '用户名', 
                    align: 'center', 
                    width: 120
            }, {
                    field: 'group_id', 
                    title: '是否VIP', 
                    align: 'center', 
                    width: 150, 
                    templet: '#group_id'
            }, {
                    field: 'sex', 
                    title: '性别',
                    width: 60, 
                    align: 'center', 
                    templet: function (d) {
                        let str='-';
                        if(d.sex==1){
                            str='男';
                        }
                        else if(d.sex==2){
                            str='女';
                        }
                        return str;
                    }
            }, {
                    field: 'openid', 
                    title: '绑定QQ', 
                    align: 'center', 
                    width: 100, 
                    templet: function(d){
                       return d.openid !== ''  ? '<span style="color: #fff;background-color: #009688;border-radius:50px;font-size: 10px;padding: 4px 8px;">已绑定</span>' : '<span style="color: #fff;background-color: #FF5722;border-radius:50px;font-size: 10px;padding: 4px 8px;">未绑定</span>';
                    }
            }, {
                    field: 'qq', 
                    title: 'QQ', 
                    align: 'center', 
                    width: 110, 
                    edit:'text', 
                    style:'background-color: #eee; color: #f00;'
            }, {
                    field: 'mobile', 
                    title: '手机号', 
                    align: 'center', 
                    width: 140,
                    edit:'text'
            }, {
                    field: 'email', 
                    title: '邮箱', 
                    align: 'center', 
                    width: 140,
                    edit:'text'
            }, {
                    field: 'login_num', 
                    title: '登录次数', 
                    align: 'center',
                    width: 100
            }, {
                    field: 'login_time', 
                    title: '最后登录时间', 
                    align: 'center',
                    width: 168
            }, {
                    field:'status', 
                    title:'是否锁定', 
                    width:110, 
                    templet: '#checkboxTpl', 
                    unresize: true
            }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 200
            }
            ]]
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.data //解析数据列表
                        };
                    }
                });
            }
        })

         //监听单元格编辑
          table.on('edit(UserList)', function(obj){
             var value = obj.value //得到修改后的值
                 ,data = obj.data //得到所在行所有键值
                 ,field = obj.field; //得到字段   
                  //console.log(obj.data.create_time);
                  var date = new Date(obj.data.create_time); 
                  var create_time = Date.parse(date);  
                   obj.data.create_time = create_time/1000;
                  delete obj.data.image; 
                  delete obj.data.password; 
                  delete obj.data.verification; 
                  var strTemp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                  var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;  
                  var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字
              if (strTemp.test(value) && value.length == 11 || reg.test(value) || regPos.test(value)) {
                 
       var index = layer.msg('<i>{:__('Submitting, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 4
    }); 
    //var load = layer.load(1, {time: 3*1000}); //加载动画 
            $.ajax({
                url: "{:url('user/edit')}?id=" +obj.data.id,
                dataType:'json',
                type: 'POST',
                timeout:5000,
                data:data,
                success:function(res){
                    if(res.code == 0){
                    layer.msg('操作成功');
                     setTimeout(function () {
                    //parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg(res.msg, {icon: 0});
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(status!='success'){
                        layer.msg("请求出错，请稍候再试");
                    }
                }.bind(this)
            });
        }else{
            
        return layer.msg('输入格式不正确！');
         }
     });

     //监听group操作
  form.on('checkbox(lockgroup)', function(obj){
    layer.tips(this.title + ' ' + this.value + '：'+ obj.elem.checked, obj.othis); 
    var load = layer.load(3, {time: 3*1000}); //加载动画 
    // 参数
    var obj = {};
    obj[$(this).attr('name')] = this.checked == true ? 1 : 0;
    obj['_verify'] = 0;
    $.ajax({
        url: "{:url('user/edit')}?id="+ this.id,
        type: 'post',
        dataType: 'json',
        data: obj,
            success:function(res){
                    if(res.code == 0){
                    layer.msg('操作成功');
                     setTimeout(function () {
                    // parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg('操作失败');
                    }
                },
        error: function (xhr, state, errorThrown) {
            layer.close(index);
            layer.msg(state + '：' + errorThrown, {icon: 2});
        }
    });
  }); 
     //监听锁定操作
  form.on('checkbox(lockDemo)', function(obj){
    layer.tips(this.title + ' ' + this.value + '：'+ obj.elem.checked, obj.othis);  
    var load = layer.load(2, {time: 3*1000}); //加载动画
    // 参数
    var obj = {};
    obj[$(this).attr('name')] = this.checked == true ? 1 : 0;
    obj['_verify'] = 0;
    $.ajax({
        url: "{:url('user/edit')}?id="+ this.id,
        type: 'post',
        dataType: 'json',
        data: obj,
            success:function(res){
                    if(res.code == 0){
                    layer.msg('操作成功');
                     setTimeout(function () {
                    // parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg('操作失败');
                    }
                },
        error: function (xhr, state, errorThrown) {
            layer.close(index);
            layer.msg(state + '：' + errorThrown, {icon: 2});
        }
    });
  });    
       //头工具栏事件
        table.on('toolbar(UserList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delete':
             
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {return layer.msg('{:__('Please select a line')}', {icon: 0});}
                layer.confirm('<i class="layui-icon layui-icon-help" style="font-size: 16px; color: #1E9FFF;"></i>确定删除?',function (index) { 
                 var index = layer.msg('{:__('Submitting, please wait')}', {
                   icon: 16,
                   time: false,
                   shade: 0.3
                 });
                  $.post('/user/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
                    break;
                case 'refresh':
                    location.reload();
                    break;
            }
        }); 
</script>
{/block}